<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

    <ui:define name="head">
        <script type="text/javascript">
			function handleDrop(event, ui) {
                var droppedCar = ui.draggable;

                droppedCar.fadeOut('fast');
			}
		</script>
	</ui:define>

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">DataGrid - Drag and Drop</h1>
		<div class="entry">
		<p>Drag and Drop components have special integration with data components, this example demonstrates dataGrid integration.
        Drag cars using headers to the drop area.</p>

			<h:form id="carForm">

                <p:fieldset id="availableCarsField" legend="Available Cars">
                    <p:dataTable id="availableCars" var="car" value="#{tableBean.carsSmall}">
                        <p:column style="width:20px">
                            <h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4" />
                            <p:draggable for="dragIcon" revert="true" />
                        </p:column>

                        <p:column headerText="Model">
                            <h:outputText value="#{car.model}" />
                        </p:column>

                        <p:column headerText="Year">
                            <h:outputText value="#{car.year}" />
                        </p:column>

                        <p:column headerText="Manufacturer">
                            <h:outputText value="#{car.manufacturer}" />
                        </p:column>

                        <p:column headerText="Color">
                            <h:outputText value="#{car.color}" />
                        </p:column>
                    </p:dataTable>
                </p:fieldset>

                <p:fieldset id="selectedCars" legend="Selected Cars" style="margin-top:20px">

                    <p:outputPanel id="dropArea">

                        <h:outputText value="!!!Drop here!!!" rendered="#{empty tableBean.droppedCars}" style="font-size:24px;" />

                        <p:dataTable id="selectedCarsTable" var="car" value="#{tableBean.droppedCars}" rendered="#{not empty tableBean.droppedCars}">
                            <p:column headerText="Model">
                                <h:outputText value="#{car.model}" />
                            </p:column>

                            <p:column headerText="Year">
                                <h:outputText value="#{car.year}" />
                            </p:column>

                            <p:column headerText="Manufacturer">
                                <h:outputText value="#{car.manufacturer}" />
                            </p:column>

                            <p:column headerText="Color">
                                <h:outputText value="#{car.color}" />
                            </p:column>

                            <p:column style="width:32px">
                                <p:commandButton update=":carForm:display" oncomplete="carDialog.show()" icon="ui-icon-search">
                                    <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>

                    </p:outputPanel>

                </p:fieldset>

                <p:droppable for="selectedCars" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableCars" onDrop="handleDrop">
                    <p:ajax listener="#{tableBean.onCarDrop}" update="dropArea availableCars" />
                </p:droppable>

                <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" draggable="false"
                          width="200" showEffect="fade" hideEffect="fade" modal="true">

                    <h:panelGrid id="display" columns="2" cellpadding="4">

                        <f:facet name="header">
                            <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
                        </f:facet>

                        <h:outputText value="Model:" />
                        <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>

                        <h:outputText value="Year:" />
                        <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>

                        <h:outputText value="Manufacturer:" />
                        <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>

                        <h:outputText value="Color:" />
                        <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>
                    </h:panelGrid>
                </p:dialog>

			</h:form>

		<h3>Source</h3>
<p:tabView>
	<p:tab title="datagrid.xhtml">
		<pre name="code" class="xml">
&lt;h:form id="carForm"&gt;

    &lt;p:fieldset legend="Available Cars"&gt;
        &lt;p:dataTable id="availableCars" var="car" value="\#{tableBean.carsSmall}"&gt;
            &lt;p:column style="width:20px"&gt;
                &lt;h:outputText id="dragIcon"
                    styleClass="ui-icon ui-icon-arrow-4" /&gt;
                &lt;p:draggable for="dragIcon" revert="true" /&gt;
            &lt;/p:column&gt;

            &lt;p:column headerText="Model"&gt;
                &lt;h:outputText value="\#{car.model}" /&gt;
            &lt;/p:column&gt;

            &lt;p:column headerText="Year"&gt;
                &lt;h:outputText value="\#{car.year}" /&gt;
            &lt;/p:column&gt;

            &lt;p:column headerText="Manufacturer"&gt;
                &lt;h:outputText value="\#{car.manufacturer}" /&gt;
            &lt;/p:column&gt;

            &lt;p:column headerText="Color"&gt;
                &lt;h:outputText value="\#{car.color}" /&gt;
            &lt;/p:column&gt;
        &lt;/p:dataTable&gt;
    &lt;/p:fieldset&gt;

    &lt;p:fieldset id="selectedCars" legend="Selected Cars" style="margin-top:20px"&gt;
        &lt;p:outputPanel id="dropArea"&gt;
            &lt;h:outputText value="!!!Drop here!!!"
                    rendered="\#{empty tableBean.droppedCars}"
                    style="font-size:24px;" /&gt;

            &lt;p:dataTable var="car" value="\#{tableBean.droppedCars}" 
                    rendered="\#{not empty tableBean.droppedCars}"&gt;

                &lt;p:column headerText="Model"&gt;
                    &lt;h:outputText value="\#{car.model}" /&gt;
                &lt;/p:column&gt;

                &lt;p:column headerText="Year"&gt;
                    &lt;h:outputText value="\#{car.year}" /&gt;
                &lt;/p:column&gt;

                &lt;p:column headerText="Manufacturer"&gt;
                    &lt;h:outputText value="\#{car.manufacturer}" /&gt;
                &lt;/p:column&gt;

                &lt;p:column headerText="Color"&gt;
                    &lt;h:outputText value="\#{car.color}" /&gt;
                &lt;/p:column&gt;

                &lt;p:column style="width:32px"&gt;
                    &lt;p:commandButton update=":carForm:display"
                            oncomplete="carDialog.show()"
                            icon="ui-icon-search"&gt;
                        &lt;f:setPropertyActionListener value="\#{car}"
                            target="\#{tableBean.selectedCar}" /&gt;
                    &lt;/p:commandButton&gt;
                &lt;/p:column&gt;
            &lt;/p:dataTable&gt;
        &lt;/p:outputPanel&gt;
    &lt;/p:fieldset&gt;

    &lt;p:droppable for="selectedCars" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableCars" onDrop="handleDrop"&gt;
        &lt;p:ajax listener="\#{tableBean.onCarDrop}" update="dropArea availableCars" /&gt;
    &lt;/p:droppable&gt;

    &lt;p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" draggable="false"
              width="200" showEffect="fade" hideEffect="fade" modal="true"&gt;

        &lt;h:panelGrid id="display" columns="2" cellpadding="4"&gt;

            &lt;f:facet name="header"&gt;
                &lt;p:graphicImage value="/images/cars/\#{tableBean.selectedCar.manufacturer}.jpg"/&gt;
            &lt;/f:facet&gt;

            &lt;h:outputText value="Model:" /&gt;
            &lt;h:outputText value="\#{tableBean.selectedCar.model}"/&gt;

            &lt;h:outputText value="Year:" /&gt;
            &lt;h:outputText value="\#{tableBean.selectedCar.year}"/&gt;

            &lt;h:outputText value="Manufacturer:" /&gt;
            &lt;h:outputText value="\#{tableBean.selectedCar.manufacturer}"/&gt;

            &lt;h:outputText value="Color:" /&gt;
            &lt;h:outputText value="\#{tableBean.selectedCar.color}"/&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
		</pre>
	</p:tab>

	<p:tab title="TableBean.java">
		<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

import org.primefaces.examples.domain.Car;

public class TableBean implements Serializable {

	static {
		colors = new String[10];
		colors[0] = "Black";
		colors[1] = "White";
		colors[2] = "Green";
		colors[3] = "Red";
		colors[4] = "Blue";
		colors[5] = "Orange";
		colors[6] = "Silver";
		colors[7] = "Yellow";
		colors[8] = "Brown";
		colors[9] = "Maroon";

		manufacturers = new String[10];
		manufacturers[0] = "Mercedes";
		manufacturers[1] = "BMW";
		manufacturers[2] = "Volvo";
		manufacturers[3] = "Audi";
		manufacturers[4] = "Renault";
		manufacturers[5] = "Opel";
		manufacturers[6] = "Volkswagen";
		manufacturers[7] = "Chrysler";
		manufacturers[8] = "Ferrari";
		manufacturers[9] = "Ford";
	}

    private final static String[] colors;

	private final static String[] manufacturers;

	private List&lt;Car&gt; carsSmall;

    private List&lt;Car&gt; droppedCars;

	public TableBean() {
		carsSmall = new ArrayList&lt;Car&gt;();
        droppedCars = new ArrayList&lt;Car&gt;();

		populateRandomCars(carsSmall, 9);
	}

	private void populateRandomCars(List&lt;Car&gt; list, int size) {
		for(int i = 0 ; i &lt; size ; i++)
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
	}

	public List&lt;Car&gt; getCarsSmall() {
		return carsSmall;
	}

	private int getRandomYear() {
		return (int) (Math.random() * 50 + 1960);
	}

	private String getRandomColor() {
		return colors[(int) (Math.random() * 10)];
	}

	private String getRandomManufacturer() {
		return manufacturers[(int) (Math.random() * 10)];
	}

	private String getRandomModel() {
		return UUID.randomUUID().toString().substring(0, 8);
	}

    public void onCarDrop(DragDropEvent ddEvent) {
        Car car = ((Car) ddEvent.getData());

        droppedCars.add(car);
        carsSmall.remove(car);
    }

    public List&lt;Car&gt; getDroppedCars() {
        return droppedCars;
    }
}
		</pre>
	</p:tab>
</p:tabView>

		</div>

	</ui:define>
</ui:composition>